<template>
  <view class="content">
    <ve-form ref="ve_form" :model="form" :rules="rules">
      <ve-card title="个人信息" type="none">
        <ve-cell label="姓名">{{ record.memberName || '-' }}</ve-cell>
        <ve-cell label="手机号">{{ record.phone || '-' }}</ve-cell>
        <ve-cell label="证件类型">{{ record.cardTypeName || '-' }}</ve-cell>
        <ve-cell label="证件号">{{ record.cardNumber || '-' }}</ve-cell>
      </ve-card>

      <ve-card title="" type="none">
        <ve-form-item label="具体原因" prop="reason" :borderBottom="false" labelPosition="top" required>
          <ve-input type="textarea" v-model="form.reason" placeholder="请输入具体原因" />
        </ve-form-item>
      </ve-card>
      <ve-bottom-box size="mini">
        <ve-button type="primary" size="long" @click="handleSave">确认</ve-button>
      </ve-bottom-box>
    </ve-form>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { toRestore, memberDetail } from '@/api/market/member'
import useFormFold from '@/hooks/useFormFold'
import { usePageDict } from '@/hooks/useDict'

const dict = usePageDict('memberDict')
const form = ref({})

const record = ref({})
const { foldStatus, foldValidate } = useFormFold([
  {
    key: 'fold1',
    props: [],
  },
  {
    key: 'fold2',
    props: ['reason'],
  },
])

console.log(foldValidate)

const rules = ref({
  blockTypeList: {
    required: true,
    message: '请选择失信类型',
  },
  reason: {
    required: true,
    message: '请输入具体原因',
  },
})

const ve_form = ref(null)
const handleSave = () => {
  // 表单验证
  ve_form.value.validate((valid, errors) => {
    if (valid) {
      console.log('验证通过')
      const params = {
        ...form.value,
      }
      toRestore(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none',
          })
          uni.$emit('refreshData')
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        }
      })
    } else {
      foldValidate(errors)
      console.log('验证失败', errors)
    }
  })
}

const getDetail = async (id) => {
  console.log(id.id)
  const res = await memberDetail({ id: id.id })
  if (res.code === 200) {
    const data = res.result
    record.value = data
    form.value.id = data.id
  }
}

onShow(() => {})

onLoad((id) => {
  console.log(id)
  if (id.id) {
    getDetail(id)
  }
})
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24rpx;
  background: #f7f8fa;
}
</style>
